<script setup>
import { reactive, ref, watch } from 'vue'

/*
  watch:监听值的变化后执行一个事件
     语法： vue2
       watch:{
       (data:xxx===>xxx,data:userInfo:{name:'zs'}====>userInfo.name)
          需要监听的值的字段名(newVal,oldVal){
            newVal:当前值
            oldVal:修改前的值
          }
       }
      watch:{
         需要监听的值的字段名:{
            handler(newVal,oldVal){
            },
            {
            deep:'是否深度监听',
            immediate:是否立马执行一次回调函数
            }
         }
      }
  vue3:用法
   基本用法
      1：导入 import {watch} from 'vue' 
      2:定义
         const stop = watch(需要监听的数据,(newVal,oldVal)=>{},{deep,immediate})
         stop:是一个方法，调用后会停止监听
   特别用法：
       可以同时监听多个数据
       watch([需要监听的数据a,需要监听的数据b],(newVal)=>{
          newVal:[需要监听的数据a,需要监听的数据b]
       },{...})
       监听响应式数据中的某个属性的变化
       watch(()=>响应式数据.属性名,(newVal)=>{...},{...})
       注意点：监听响应式数据中某个属性（该属性是复杂数据类型），需要监听全部变化 时，需要加deep:true

       和vue2区别：
         1：vue3返回值是一个停止方法
         2: 可以同时监听多个数据的变化
    



*/
const num = ref(10)
// const stop = watch(
//   num,
//   newVal => {
//     console.log('newVal', newVal)
//   },
//   {
//     immediate: true
//   }
// )
const randomNum = ref(999)
watch([num, randomNum], newVal => {
  console.log(newVal)
})

const userInfo = reactive({
  name: '张三',
  age: 18,
  other: {
    gender: '男',
    address: '广州'
  }
})
watch(
  () => userInfo.age,
  newVal => {
    console.log(newVal)
  }
)
watch(
  () => userInfo.other,
  newVal => {
    console.log(newVal)
  },
  {
    deep: true
  }
)
</script>

<template>
  <div class="app-page">{{ num }}</div>
  <button @click="num++">修改num</button>
  <!-- <button @click="stop">停止监听</button> -->
  <hr />
  <div>{{ randomNum }}</div>
  <button @click="randomNum = Math.random() * 999">修改randomNum</button>
  <hr />
  <div>{{ userInfo }}</div>
  <button @click="userInfo.age++">修改userInfo的年龄</button>
  <button @click="userInfo.other.gender = userInfo.other.gender === '男' ? '女' : '男'">
    修改userInfo的性别
  </button>
</template>

<style scoped></style>
